<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<link href="css/bootstrap-reset.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script type="text/javascript" src="js/myjs/util.js"></script>
<script type="text/javascript">
	memberCardCurrentPage=1;
	memberCardtotalNum=0;
	function nextPage(){
		if(($("#na").css("color")=="#c7c7c7")||($("#na").css("color")==("rgb(199, 199, 199)"))){
			return;
		}
		memberCardCurrentPage=memberCardCurrentPage+1;
		$("#currentPageSpan").text(memberCardCurrentPage);
		changePage();
		init();
	}
	function previousPage(){
		if(($("#pa").css("color")=="#c7c7c7")||($("#pa").css("color")==("rgb(199, 199, 199)"))){
			return;
		}
		memberCardCurrentPage=memberCardCurrentPage-1;
		$("#currentPageSpan").text(memberCardCurrentPage);
		changePage();
		init();
	}
	function goPage(){
		var totalPage=Math.ceil(memberCardtotalNum/10);
		if($("#gopageinput").val()<=0||$("#gopageinput").val()>totalPage){
			return;
		}else{
			memberCardCurrentPage=$("#gopageinput").val();
			$("#currentPageSpan").text(memberCardCurrentPage);
			changePage();
			init();
		}
	}
	function changePage(){
		var totalPage=Math.ceil(memberCardtotalNum/10);
		if(memberCardCurrentPage<=1){
			$("#pa").css("color","#c7c7c7");
		}else{
			$("#pa").css("color","#797979");
		}
		if(memberCardCurrentPage>=totalPage){
			$("#na").css("color","#c7c7c7");
		}else{
			$("#na").css("color","#797979");
		}
	}
	$(document).keydown(function(event){
		　　　　if(event.keyCode == 13){
		　　　　　　goPage(); 
		　　　　}
		　　});
	function toAddPage(){
		window.location.href="addMemberCard.html";
	}
    $(document).ready(function() {
    	init();
    	changePage();
	});
	function init() {
		$("#nextPageLi").addClass("disabled");
		var url = "/yuea/weixin/membershipCard/getAll";
		var data = {};
		data.pageNo=memberCardCurrentPage;
		data.cardNo=$("#searchConditon").val();
		data.customerName=$("#searchConditon").val();
		data.telphoneNo=$("#searchConditon").val();
		$.ajax({
			url : url,
			type : "post",
			async:false,
			contentType : "application/json",
			dataType : "json",
			data : JSON.stringify(data),
			success : function(response) {
				if (response.state == "BUSI_STATE_OK") {
					setData(response.data);
					memberCardtotalNum=response.totalNum;
					$("#totalNumDiv").html(memberCardtotalNum);
				}
			},
			error : function(response) {
				alert("系统发生错误。");
			}
		})
	}
	
	function setData(cards){
		if(cards.length==0){
			$("#cardsBody").html("<td colspan=\"9\" align=\"center\" height=\"100px\">没有数据</td>")
			return;
		}
		var templateSrc="<tr>\r\n" + 
		"	<td><a href=\"#\">${cardNo}</a></td>\r\n" + 
		"	<td>$(customerName)</td>\r\n" + 
		"	<td>${telphoneNo}</td>\r\n" + 
		"	<td>￥${accountBalance}</td>\r\n" + 
		"	<td>${discountRate}</td>\r\n" + 
		"	<td>${leftTimes}</td>\r\n" + 
		"	<td>${openTime}</td>\r\n" + 
		"	<td><span class=\"label ${classStyle} label-mini\">${state}</span></td>\r\n" + 
		"	<td>\r\n" + 
		"		<!-- <button class=\"btn btn-success btn-xs\">\r\n" + 
		"			<i class=\"fa fa-check\"></i>\r\n" + 
		"		</button> -->\r\n" + 
		"		<button class=\"btn btn-primary btn-xs\">\r\n" + 
		"			<i class=\"fa fa-pencil\"></i>\r\n" + 
		"		</button>\r\n" + 
		"		<button class=\"btn btn-danger btn-xs\">\r\n" + 
		"			<i class=\"fa fa-trash-o \"></i>\r\n" + 
		"		</button>\r\n" + 
		"	</td>\r\n" + 
		"</tr>";
		var cardStr="";
		var temp;
		for(var i=0;i<cards.length;i++){
			temp=cards[i];
			var template=templateSrc;
			template=template.replace("${cardNo}",temp.cardNo);
			template=template.replace("$(customerName)",temp.customerName);
			template=template.replace("${telphoneNo}",temp.telphoneNo);
			template=template.replace("${accountBalance}",temp.accountBalance);
			template=template.replace("${discountRate}",(temp.discountRate==null?"—":temp.discountRate));
			template=template.replace("${leftTimes}",(temp.leftTimes==null?"—":temp.leftTimes));
			template=template.replace("${openTime}",formatDate(new Date(temp.openTime),"1"));
			//label label-primary label-mini
			//label label-warning label-mini
			if(temp.state=="1"){
				template=template.replace("${state}","正常");
				template=template.replace("${classStyle}","label-info");
			}
			if(temp.state=="2"){
				template=template.replace("${state}","挂失");
				template=template.replace("${classStyle}","label-warning");
			}
			if(temp.state=="3"){
				template=template.replace("${state}","欠费");
				template=template.replace("${classStyle}","label-primary");
			}
			cardStr=cardStr+template;
		}
		$("#cardsBody").html(cardStr);
	}
</script>
</head>

<body>
	<section id="container" class="">
		<section id="main-content">
			<section class="wrapper">
				<div class="row">
					<div class="col-lg-12">
						<section class="panel">
							<header class="panel-heading"> 会员管理 </header>
							<div class="panel-body">
							
								
							
							
							
								<div class="btn-group">
	                                  <button id="editable-sample_new" class="btn btn-success" onclick="toAddPage()">
	                                      	添加会员卡 <i class="fa fa-plus"></i>
	                                  </button>
	                              </div>

								<div class="adv-table editable-table ">
									<div class="form-group" style="float: right;">
												<div class="col-lg-6"></div>
										<div class="col-lg-6">
											<div class="input-group m-bot15">
												<input id="searchConditon" name="searchConditon" type="text" class="form-control"
													placeholder="请输入手机号、会员卡号或会员姓名">
												<span class="input-group-btn">
				                                  <button id="searchConditon" class="btn btn-success" onclick="init()">
				                                      	搜索 <i class="fa  fa-search"></i>
				                                  </button>
												</span> 
											</div>
	
										</div>
									</div>
								</div>

								<div class="adv-table">
									<div id="dynamic-table_wrapper"
										class="dataTables_wrapper form-inline" role="grid">
										<table class="table table-striped table-advance table-hover">
											<thead>
												<tr>
													<th><i class="fa fa-credit-card"></i> 会员卡号</th>
													<th class="hidden-phone"><i class="fa fa-user"></i>会员姓名</th>
													<th><i class="fa fa-phone-square"></i> 电话</th>
													<th><i class="fa fa-yen (alias)"></i> 余额</th>
													<th><i class="fa fa-bolt"></i> 折扣</th>
													<th><i class="fa fa-ellipsis-h"></i> 剩余次数</th> 
													<th><i class="fa fa-calendar"></i> 开卡日期</th>
													<th><i class="fa fa-bell"></i> 状态</th>
													<th><i class="fa fa-gear (alias)"></i> 操作</th>
												</tr>
											</thead>
											<tbody id="cardsBody">
											</tbody>
										</table>

										<div class="row-fluid">
											<div class="span6" style="float: left;">
												<div class="dataTables_info" id="dynamic-table_info">
												共<span id="totalNumDiv">0</span>条
												</div>
											</div>
											
											<div class="span6" style="float: left;margin-left: 15px">
												<div class="dataTables_info" id="dynamic-table_info">
												当前第<span id="currentPageSpan">1</span>页
												</div>
											</div>
											

											<div class="span6" style="float: left;margin-left: 20px">
												<div class="dataTables_paginate paging_bootstrap pagination">
													<ul>
														<li id="nextPageLi" class="prev" onclick="previousPage()">
															<a href="#"><span id="pa">← 上一页</span></a>
														</li>
														<li id="previousPageLi" class="next" onclick="nextPage()">
															<a href="#"><span id="na">下一页 →</span> </a>
														</li>
													</ul>
												</div>
											</div>
											
											<div class="span6" style="float: left;margin-left: 20px">
												<div class="dataTables_paginate paging_bootstrap pagination">
													前往第<input id="gopageinput" type="text" class="form-control" style="height: 30px;margin-left: 5px;margin-right: 5px;width: 60px"></input>页
												</div>
											</div>
											<div class="span6" style="float: left;margin-left: 5px">
												<div class="dataTables_paginate paging_bootstrap pagination">
				                              	<div class="btn-row">
				                                      <div class="btn-group">
				                                          <button class="btn btn-success" type="button" style="padding: 3px 12px" onclick="goPage()">GO</button>
				                                      </div>
				                                  </div>
				                                 </div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</section>

						<section></section>
					</div>
				</div>
			</section>
		</section>
	</section>
</body>
</html>
